<template>
    <div class="publicBtn">
        <p class="title">{{title}}</p>
        <div class="right">
            <el-radio-group size="mini" v-model="activeTime" @change="handleBtnChange">
                <el-radio-button :label="1">昨日</el-radio-button>
                <el-radio-button :label="2">今日</el-radio-button>
                <el-radio-button :label="3">近七天</el-radio-button>
            </el-radio-group>
            <el-date-picker v-if="showDate" class="date" size="mini" v-model="date" type="date" format="yyyy-MM-dd " value-format="timestamp"
                @change="handleDateChange" placeholder="选择日期"></el-date-picker>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '事件趋势',
        },
        activeTime: {
            type: Number,
            default: 1,
        },
        showDate: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        handleBtnChange(val) {
            console.log(val)
        },
        handleDateChange(val) {
            console.log(val)
        },
    },
}
</script>

<style lang="less" scoped>
.publicBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }
    .date {
        margin-left: 10px;
    }
}
</style>